<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :label="$t('business.configuration.resource_name')">
          <el-select v-model="row.resource.name" style="width: 100%">
            <el-option value="cpu" label="CPU" />
            <el-option value="memory" label="Memory" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item key="resource" :label="$t('business.configuration.type')">
          <el-select
            v-model="row.resource.target.type"
            style="width: 100%"
            @change="changeResourceType(row)"
          >
            <el-option value="Utilization" label="Average Utilization" />
            <el-option value="AverageValue" label="Average Value" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          v-if="row.resource.target.type === 'AverageValue'"
          :label="$t('business.configuration.quantity')"
        >
          <el-input-number
            v-model.number="row.resource.target.averageValue"
            type="number"
            required
          >
            <template v-slot:append>mCpus</template>
          </el-input-number>
        </el-form-item>
        <el-form-item
          v-if="row.resource.target.type === 'Utilization'"
          :label="$t('business.configuration.quantity')"
        >
          <el-input
            v-model.number="row.resource.target.averageUtilization"
            type="number"
            required
          >
            <template v-slot:append>%</template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
const row = defineModel<any>("row");

const changeResourceType = row => {
  if (row.resource.target.type === "AverageValue") {
    delete row.resource.target.averageUtilization;
    row.resource.target.averageValue = 80;
  }
  if (row.resource.target.type === "Utilization") {
    delete row.resource.target.averageValue;
    row.resource.target.averageUtilization = 80;
  }
};
</script>

<style scoped></style>
